<template>
	<view class="train-detail data-v-3c59eb11">
		<view class="scroll-wrap data-v-3c59eb11">
			<view class="data-v-3c59eb11" style="flex-direction:column;flex:1;">
				<view class="head_cotent data-v-3c59eb11">
					<image class="head_image data-v-3c59eb11" mode="widthFix" src=""></image>
					<view class="data-v-3c59eb11" style="margin-top:0rpx;padding-left:42rpx;flex-direction:column;">
						<view class="BebasNeueBold data-v-3c59eb11" style="margin-top:30rpx;align-items:center;">
							<text class="data-v-3c59eb11"
								style="font-size:42rpx;color:#1a1a1a;font-weight:bold;">已训练</text>
							<text class="data-v-3c59eb11"
								style="font-size:42rpx;color:#e83229;font-weight:bold;">{{schemeInfo.executionIndex}}</text>
							<text class="data-v-3c59eb11"
								style="font-size:42rpx;color:#1a1a1a;font-weight:bold;">{{'/'+schemeInfo.executeNumber+'次'}}</text>
						</view>
						<view class="name_wrap data-v-3c59eb11">
							<text class="scheme_name data-v-3c59eb11">{{schemeInfo.schemeName}}</text>
							<image class="arrow_right_img data-v-3c59eb11" src=""></image>
						</view>
					</view>
				</view>
				<view class="body_cotent data-v-3c59eb11">
					<uni-card class="training_results data-v-3c59eb11" :extra="schemeInfo.startTime" :isShadow="false"
						title="训练成绩">
						<view class="tag data-v-3c59eb11">
							<text class="value BebasNeueBold data-v-3c59eb11">{{schemeInfo.costTime}}</text>
							<text class="key data-v-3c59eb11">用时</text>
						</view>
						<view class="tag data-v-3c59eb11">
							<text class="value BebasNeueBold data-v-3c59eb11">960</text>
							<text class="key data-v-3c59eb11">千卡</text>
						</view>
						<view class="tag data-v-3c59eb11">
							<text class="value BebasNeueBold data-v-3c59eb11">{{schemeInfo.completeRate}}</text>
							<text class="key data-v-3c59eb11">完成率</text>
						</view>
					</uni-card>
					<uni-card class="action_completed data-v-3c59eb11" :isShadow="false" title="动作完成">
						<view class="list-item BebasNeueRegular data-v-3c59eb11" v-for="(item,index) in sportList"
							:key="index">
							<view class="sportway data-v-3c59eb11">
								<text class="data-v-3c59eb11">{{item.sportName}}</text>
								<image class="sportway_complete_img data-v-3c59eb11" src="" v-if="item.showCompleteImg">
								</image>
								<text class="sportway_value data-v-3c59eb11" v-else>{{item.sportValue}}</text>
							</view>
							<block v-if="item.children&&item.children.length" v-for="(cItem,idx) in item.children"
								:key="idx">
								<view class="sub_sportway data-v-3c59eb11">
									<text class="dot data-v-3c59eb11">{{cItem.sportName}}</text>
									<text class="data-v-3c59eb11">{{cItem.sportValue}}</text>
								</view>
								<view class="sub_sub_sportway data-v-3c59eb11"
									v-if="cItem.children&&cItem.children.length" v-for="(ccItem,cctx) in cItem.children"
									:key="cctx">
									<text class="dot data-v-3c59eb11">{{ccItem.sportName}}</text>
									<text class="data-v-3c59eb11">{{ccItem.sportValue}}</text>
								</view>
							</block>
						</view>
					</uni-card>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				schemeInfo: {
					startTime: "2025-05-01",
					costTime: "2025-05-01",
					completeRate: "96%",
					executionIndex: 6,
					executeNumber: 8,
					schemeName: "这里是方案名称",
				},
				sportList: [{
					sportName: "祖项目",
					sportValue: "1200",
					showCompleteImg: true,
					children: [{
						sportName: "父项目",
						sportValue: "120",
						children: [{
							sportName: "子项目",
							sportValue: "12"
						}, {
							sportName: "子项目",
							sportValue: "12"
						}]
					}, {
						sportName: "父项目",
						sportValue: "120",
						children: [{
							sportName: "子项目",
							sportValue: "12"
						}, {
							sportName: "子项目",
							sportValue: "12"
						}]
					}]
				}, {
					sportName: "祖项目",
					sportValue: "1200",
					showCompleteImg: true,
					children: [{
						sportName: "父项目",
						sportValue: "120",
						children: [{
							sportName: "子项目",
							sportValue: "12"
						}, {
							sportName: "子项目",
							sportValue: "12"
						}]
					}, {
						sportName: "父项目",
						sportValue: "120",
						children: [{
							sportName: "子项目",
							sportValue: "12"
						}, {
							sportName: "子项目",
							sportValue: "12"
						}]
					}]
				}],
				opacityStyle: {
					backgroundColor: "rgba(219,233,250,0)"
				},
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #f2f3f5;
		min-height: 100%;
		width: 100%;
	}

	page,
	view.data-v-3c59eb11 {
		display: -webkit-flex;
		display: flex;
	}

	.train-detail.data-v-3c59eb11 {
		background: linear-gradient(180deg, #dce9fb 10%, #f2f3f5);
		flex: 1;
		flex-direction: column;
	}

	.train-detail .train-detail_head.data-v-3c59eb11 {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 100%;
		z-index: 1;
	}

	.train-detail .status_bar.data-v-3c59eb11 {
		height: 110rpx;
		width: 100%;
	}

	.train-detail .title_nav.data-v-3c59eb11 {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
	}

	.train-detail .title_nav .view_back.data-v-3c59eb11,
	.train-detail .title_nav.data-v-3c59eb11 {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		height: 110rpx;
	}

	.train-detail .title_nav .view_back.data-v-3c59eb11 {
		justify-content: center;
		width: 110rpx;
	}

	.train-detail .title_nav .view_back.data-v-3c59eb11:active {
		background-color: #eee;
	}

	.train-detail .title_nav .view_back .icon_back.data-v-3c59eb11 {
		height: 50rpx;
		width: 50rpx;
	}

	.train-detail .title_nav .text_title.data-v-3c59eb11 {
		font-size: 40rpx;
		font-weight: 500;
	}

	.train-detail .scroll-wrap.data-v-3c59eb11 {
		flex: 1;
		position: relative;
	}

	.train-detail .scroll-wrap .scroll.data-v-3c59eb11 {
		bottom: 0;
		flex: 1;
		position: absolute;
		top: 0;
	}

	.train-detail .head_cotent.data-v-3c59eb11 {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		padding-bottom: 60rpx;
		padding-top: 80rpx;
		position: relative;
		z-index: 1;
	}

	.train-detail .head_cotent .head_image.data-v-3c59eb11 {
		bottom: -65rpx;
		height: 336rpx !important;
		position: absolute;
		right: 0rpx;
		width: 188rpx;
		z-index: 0;
	}

	.train-detail .head_cotent .name_wrap.data-v-3c59eb11 {
		align-items: center;
		margin-right: 180rpx;
		margin-top: 10rpx;
	}

	.train-detail .head_cotent .name_wrap .scheme_name.data-v-3c59eb11 {
		-webkit-box-orient: vertical;
		color: #1a1a1a;
		display: -webkit-box;
		font-size: 36rpx;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.train-detail .head_cotent .name_wrap .arrow_right_img.data-v-3c59eb11 {
		flex-shrink: 0;
		height: 48rpx;
		width: 48rpx;
	}

	.train-detail .body_cotent.data-v-3c59eb11 {
		display: block;
		z-index: 2;
	}

	.train-detail .body_cotent .uni-card.data-v-3c59eb11 {
		border: none;
		border-radius: 16rpx;
		box-shadow: none !important;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
	}

	.train-detail .body_cotent.data-v-3c59eb11 .uni-card__header {
		align-items: center;
		border-bottom: none !important;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.train-detail .body_cotent.data-v-3c59eb11 .uni-card__header-content-title {
		color: rgba(0, 0, 0, 0.82);
		font-size: 32rpx;
		font-weight: 700;
	}

	.train-detail .body_cotent .training_results.data-v-3c59eb11 .uni-card__content {
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
	}

	.train-detail .body_cotent .training_results.data-v-3c59eb11 .uni-card__content .tag {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
	}

	.train-detail .body_cotent .training_results.data-v-3c59eb11 .uni-card__content .tag .value {
		color: #000;
		font-size: 46rpx;
	}

	.train-detail .body_cotent .training_results.data-v-3c59eb11 .uni-card__content .tag .key {
		color: #6e6e6e;
		font-size: 24rpx;
		opacity: 0.74;
	}

	.train-detail .body_cotent .training_results.data-v-3c59eb11 .uni-card__content .tag:nth-child(1),
	.train-detail .body_cotent .training_results.data-v-3c59eb11 .uni-card__content .tag:nth-child(2) {
		border-right: 1px solid #ccc;
	}

	.train-detail .body_cotent .action_completed.data-v-3c59eb11 {
		border-radius: 20rpx;
	}

	.train-detail .body_cotent .action_completed .list-item.data-v-3c59eb11 {
		flex-direction: column;
		margin-bottom: 10rpx;
	}

	.train-detail .body_cotent .action_completed .sportway.data-v-3c59eb11 {
		color: #696969;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.train-detail .body_cotent .action_completed .sportway .sportway_value.data-v-3c59eb11 {
		font-size: 34rpx;
	}

	.train-detail .body_cotent .action_completed .sportway .sportway_complete_img.data-v-3c59eb11 {
		height: 60rpx;
		width: 60rpx;
	}

	.train-detail .body_cotent .action_completed .sub_sportway.data-v-3c59eb11 {
		color: #696969;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.train-detail .body_cotent .action_completed .sub_sub_sportway.data-v-3c59eb11 {
		font-size: 30rpx;
		margin-bottom: 10rpx;
		margin-left: 20rpx;
	}

	.train-detail .body_cotent .action_completed .sportway.data-v-3c59eb11,
	.train-detail .body_cotent .action_completed .sub_sportway.data-v-3c59eb11,
	.train-detail .body_cotent .action_completed .sub_sub_sportway.data-v-3c59eb11 {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.train-detail .body_cotent .action_completed .sub_sportway .dot.data-v-3c59eb11 {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		flex: 1;
		margin-right: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.train-detail .body_cotent .action_completed .sub_sportway .dot.data-v-3c59eb11:before {
		border: 4rpx solid #d1d1d1;
		border-radius: 50%;
		content: "";
		display: -webkit-inline-flex;
		display: inline-flex;
		flex-shrink: 0;
		height: 12rpx;
		margin-right: 10rpx;
		width: 12rpx;
	}

	.BebasNeueBold.data-v-3c59eb11 {
		font-family: BebasNeueBold;
	}

	.BebasNeueRegular.data-v-3c59eb11 {
		font-family: BebasNeueRegular;
	}
</style>